<template>
	<view class="">
		<uni-nav-bar class="navbar" @clickLeft="back" leftIcon="back" :statusBar="true" :border="false" title='量'>
			<view slot="right" class="right">
				<image class="right-icon" src="../../static/jiahao.png" mode=""></image>
			</view>
		</uni-nav-bar>
		
		<!-- <scroll-view > -->
			<view scroll-x="true" class="nav scrollviewclass">
				<block v-for="(item,index) in menu" :key="index">
					<view class="first-menu" >
						<text :class="index==menuIndex?'deg':'triangle'" @click="toggleMenu(index)">{{item.name}}</text>
					</view>
				</block>
			</view>
		<!-- </scroll-view> -->
		
		<block v-if="isshowSub">
			<view class="submenu">
				<view class="submenu-item" @click="subClick(sub)" v-for="(sub,key) of menu[menuIndex].submenu">{{sub.name}}</view>
			</view>
		</block>
		<view class="mask" v-if="isshowSub" @click="hideMask"></view>
		<view class="label-box">
			<view class="label-type">
				<text>选择类别</text>
				<picker mode="selector" :range="typeArray" range-key="name" @change="selectType">
					<view class="typename">{{typeName}}</view>
				</picker>
			</view>
			<view class="time">
				<view :class="timeType==1?'active-style':'week-day'" @click="timeTypeClick(1)">日</view>
				<view :class="timeType==2?'active-style':'week-day'" @click="timeTypeClick(2)">周</view>
				<view class="month">
					<text>月：</text>
					<picker mode="date" @change="selectMonth">
						<view>{{dateMsg}}</view>
					</picker>
				</view>
				
			</view>
		</view>
		
		<view class="data" v-if="typeName!='请选择'">
			<text>人数：100</text>
			<text>量：100t</text>
		</view>
		
		<view class="table-box">
			<scroll-view scroll-x="true" >
				<view>
					<view class="table-header">
						<view v-for="(item,index) of tableHeader" 
						:key="index" 
						class="table-header-item" 
						:class="item.selectStatus==1?'up':item.selectStatus==2?'down':'default'"
						@click="tableHeaderClick(item)">{{item.name}}</view>
					</view>
					<view class="table-body">
						<view class="table-body-item">01SY1</view>
						<view class="table-body-item">李荣浩</view>
						<view class="table-body-item">粤B39JN9</view>
						<view class="table-body-item">5吨</view>
						<view class="table-body-item">3</view>
						<view class="table-body-item">1998</view>
						<view class="table-body-item">23</view>
						<view class="table-body-item">13</view>
						<view class="table-body-item">78</view>
						<view class="table-body-item">2</view>
						<view class="table-body-item">0.3</view>
						<view class="table-body-item">3.2</view>
						<view class="table-body-item table-time">2012-12-12 23:00</view>
					</view>
					<view class="table-body">
						<view class="table-body-item">01SY1</view>
						<view class="table-body-item">李荣浩</view>
						<view class="table-body-item">粤B39JN9</view>
						<view class="table-body-item">5吨</view>
						<view class="table-body-item">3</view>
						<view class="table-body-item">1998</view>
						<view class="table-body-item">23</view>
						<view class="table-body-item">13</view>
						<view class="table-body-item">78</view>
						<view class="table-body-item">2</view>
						<view class="table-body-item">0.3</view>
						<view class="table-body-item">3.2</view>
						<view class="table-body-item table-time">2012-12-12 23:00</view>
					</view>
					
					
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	export default {
		components:{
			HMfilterDropdown
		},
		data() {
			return {
				tableHeader:[{name:'编号',selectStatus:0},{name:'姓名',selectStatus:0},{name:'车牌号',selectStatus:0},{name:'型号',selectStatus:0},{name:'量',selectStatus:0},{name:'购置年限',selectStatus:0},
				{name:'公里数',selectStatus:0},{name:'加油数',selectStatus:0},{name:'电耗',selectStatus:0},{name:'水耗',selectStatus:0},{name:'油耗比',selectStatus:0},{name:'电耗比',selectStatus:0},{name:'时间',selectStatus:0},
				],
				menuIndex:-1,
				menu:[{name:'收运',submenu:[{name:'大件收运'},{name:'餐厨收运'},{name:'建筑收运'},{name:'可回收收运'}]},
				{name:'机扫',submenu:[{name:'干扫'},{name:'湿扫'},{name:'洗扫'},{name:'自动洗扫'},{name:'自动干扫'}]},
				{name:'洒水',submenu:[{name:'降尘'},{name:'降温'},{name:'抑尘'},{name:'花洒'}]},
				{name:'保洁',submenu:[{name:'道路保洁'},{name:'绿化保洁'},{name:'社区保洁'},{name:'背街小巷保洁'},{name:'物业保洁'},{name:'水域保洁'}]},
				{name:'冲洗',submenu:[{name:'前冲'},{name:'对冲'},{name:'侧冲'}]},
				{name:'转运',submenu:[{name:'大件转运'},{name:'餐厨转运'},{name:'建筑转运'}]},
				{name:'处理',submenu:[{name:'生活垃圾填埋'},{name:'生活垃圾焚烧'},{name:'餐厨高温高氧'},{name:'大件破碎'},{name:'污水处理'},{name:'建筑垃圾处理'},{name:'污泥处理'},{name:'工业垃圾处理'}]},
				{name:'资源化',submenu:[{name:'生物颗粒'},{name:'有机肥'},{name:'原料'},{name:'混凝土'},{name:'工艺砖'},{name:'原料产品'}]},
				{name:'收运',submenu:[{name:'大件收运'},{name:'餐厨收运'},{name:'建筑收运'},{name:'可回收收运'}]},
				{name:'收运',submenu:[{name:'大件收运'},{name:'餐厨收运'},{name:'建筑收运'},{name:'可回收收运'}]},
				{name:'收运',submenu:[{name:'大件收运'},{name:'餐厨收运'},{name:'建筑收运'},{name:'可回收收运'}]},],
				typeArray:[{name:'清运司机'},{name:'清扫司机'},{name:'收运司机'},{name:'转运司机'}],
				typeName:'请选择',
				dateMsg:'请选择',
				timeType:1,
				isshowSub:false
			}
		},
		methods:{
			back(){
				this.$utils.navBack()
			},
			toggleMenu(index) {
				if(index==this.menuIndex) {
					this.menuIndex = -1
					this.isshowSub = false
				}else {
					this.menuIndex = index
					this.isshowSub = true
				}
			},
			hideMask() {
				this.isshowSub = false
			},
			subClick(sub) {
				this.menu[this.menuIndex].name = sub.name
				this.isshowSub = false
			},
			confirm(e){
				this.indexArr = e.index;
				this.valueArr = e.value;
				return;
				console.log('修改菜单');
				this.filterData[4].submenu[1] = {
						"name": "项目2",
						"submenu": [
							
						]
					}
			},
			selectMonth(e) {
				this.dateMsg = e.detail.value
			},
			selectType(e) {
				this.typeName = this.typeArray[e.detail.value].name
			},
			timeTypeClick(type) {
				this.timeType = type
			},
			tableHeaderClick(item) {
				if(item.selectStatus==0) {
					item.selectStatus = 1
				}else if(item.selectStatus==1) {
					item.selectStatus = 2
				}else {
					item.selectStatus = 0
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F9FC;
	}
</style>
<style scoped>
/* 字体图标 */
.navbar {
	position: relative;
	z-index: 99;
}
.triangle {
	position: relative;
	color: #d8d8d8;
}
.triangle::after {
	content: '\e611';
	font-family: iconfont;
	color: #D8D8D8;
	font-size: 28upx;
}
.deg {
	color: #2962F9;
}
.deg::after {
	content: '\e600';
	font-family: iconfont;
	
	color:#2962F9;
	font-size: 28upx;
}
.typename::after {
	content: '\e611';
	font-family: iconfont;
	color: #D8D8D8;
	font-size: 28upx;
}
.nav {
	/* width: 100%; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: solid 1rpx #eee;
	position: relative;
	z-index: 99;
	background-color: #ffffff !important;
	flex-direction: row; 
	padding: 20upx 0upx;
}



.right-icon{
	height: 36rpx;
	width: 36rpx;
}
.table-box {
	background-color: #FFFFFF;
	margin: 30upx 0upx;
}
.table-header,.table-body {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.table-header-item {
	padding: 20upx 0upx;
	width: 150upx;
	flex-shrink: 0;
	font-size: 28upx;
	text-align: center;
}
.table-body {
	/* border-bottom: 1px solid #EAEAEA; */
}
.table-body-item {
	width: 150upx;
	flex-shrink: 0;
	font-size: 28upx;
	text-align: center;
	padding: 20upx 0upx;
	border-bottom: 1px solid #EAEAEA;
}
.table-time {
	width: 250upx;
}
.first-menu {
	width: 20%;
	flex-shrink: 0;
	font-size: 28upx;
	text-align: center;
	overflow:hidden; 
	white-space:nowrap; 
	text-overflow:ellipsis;
}
.submenu {
	width: 100%;
	box-sizing: border-box;
	font-size: 28upx;
	position: relative;
	z-index: 999;
	background-color: #FFFFFF;
}
.mask {
	z-index: 1;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
}
.submenu-item {
	border-bottom: 1px solid #EAEAEA;
	padding: 10upx 30upx;
}
/* 隐藏滚动条 */
.scrollviewclass {
	overflow-x: auto;
	white-space: nowrap; 
	display: flex;
}
::-webkit-scrollbar {
	display: none;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.label-box {
	width: 100%;
	background-color: #FFFFFF;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28upx;
	padding: 0upx 30upx;
	margin-top: 20upx;
}
.label-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	padding: 20upx 0upx;
}
.time {
	display: flex;
	/* flex-grow: 1; */
	width: 60%;
	justify-content: space-between;
	align-items: center;
	margin-left: 30upx;
}
.month {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid #FFFFFF;
}
.active-style {
	padding: 20upx;
	border-bottom: 2px solid #007AFF;
}
.week-day {
	padding: 20upx;
	border-bottom: 2px solid #FFFFFF;
}
.data {
	width: 100%;
	box-sizing: border-box;
	padding: 10upx 30upx;
	background-color: rgba(235,241,255,1);
	font-size: 28upx;
	color: #6185DA;
}
/* up */
.up::after {
	content: '\e74c';
	font-family: iconfont;
	color: #007AFF;
	font-size: 28upx;
}
.down::after {
	content: '\e7ff';
	font-family: iconfont;
	color: #007AFF;
	font-size: 28upx;
}
.default::after {
	content: '\e654';
	font-family: iconfont;
	color: #D8D8D8;
	font-size: 28upx;
}
</style>
